<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>首页</title>
		<link rel="shortcut icon" type="image/x-icon" href="../../yjzh-img/main/logo.ico" media="screen" />
		<link rel="stylesheet" type="text/css" href="../../yjzh-plugins/font-awesome-4.7.0/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="../../yjzh-plugins/calendar/css/calendar.css" />
		<link rel="stylesheet" type="text/css" href="../../yjzh-css/main.css" />
		<link rel="stylesheet" type="text/css" href="../../yjzh-css/all-page.css" />
		<link rel="stylesheet" type="text/css" href="../../yjzh-css/index.css" />
	</head>

	<body>
		<!--最外层盒子-->
		<div class="max-box">
			<!--头部盒子外层开始-->
			<div class="top-box clear">
				<img class="logo-icon" src="../../yjzh-img/main/logo-icon.png" />
				<span class="logo-title">应急指挥调度平台</span>
				<img class="logo-leaf" src="../../yjzh-img/main/top-leaf.png" />
				<ul class="user-list">
					<li>
						<a><i class="fa fa-power-off color-dark-blue font-size-16px" aria-hidden="true"></i><span class="color-dark-blue">&nbsp;&nbsp;退出</span></a>
					</li>
					<li>
						<a><i class="fa fa-user color-dark-blue font-size-16px" aria-hidden="true"></i><span class="color-dark-blue">&nbsp;&nbsp;您好，用户名</span></a>
					</li>
				</ul>
			</div>
			<!--头部盒子外层结束-->

			<!--左侧菜单外层盒子开始-->
			<div class="left-box">
				<!--左侧菜单内层盒子开始-->
				<div class="left-inner-box bg-black-blue">
					<!--收起菜单按钮样式开始-->
					<div class="pack-up-box">
						<i class="fa fa-bars color-white font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span class="color-white">收起菜单</span>
					</div>
					<!--收起菜单按钮样式结束-->
					<!--一级菜单开始-->
					<ul class="left-level1-list">
						<li class="checked-level1">
							<a class="checked-level1-cell"><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单一</span></a>
							<!--二级菜单开始-->
							<ul class="left-level2-list">
								<li class="checked-level2">
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
							</ul>
							<!--二级菜单结束-->
						</li>
						<li>
							<a class="checked-level1-cell"><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单一</span></a>
							<!--二级菜单开始-->
							<ul class="left-level2-list">
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
							</ul>
							<!--二级菜单结束-->
						</li>
						<li>
							<a class="checked-level1-cell"><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单一</span></a>
						</li>
						<li>
							<a class="checked-level1-cell"><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单一</span></a>
						</li>
						<li>
							<a class="checked-level1-cell"><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单一</span></a>
						</li>
					</ul>
					<!--一级菜单结束-->
				</div>
				<!--左侧菜单内层盒子结束-->
			</div>
			<!--左侧菜单外层盒子结束-->

			<!--右侧内容外层盒子开始-->
			<div class="right-box">
				<!--右侧内容内层盒子开始-->
				<div class="right-inner-box">
					<!--面包屑开始-->
					<div class="top-nav-box">
						<div class="nav-title">
							<a class="color-black-gray">首页</a><span>&nbsp;>&nbsp;</span>
							<a class="color-black-gray">多媒体报警</a><span>&nbsp;>&nbsp;</span>
							<a class="color-dark-blue">多屏指挥</a>
						</div>
						<div class="right-time"></div>
					</div>
					<!--面包屑结束-->
					<!--主要内容外层盒子开始-->
					<div class="content-box">
						<!--主要内容内层盒子开始-->
						<div class="content-inner-box">
							<!--历史记录外层盒子开始-->
							<div class="history-max-box">
								<!--查询与日历外层盒子开始-->
								<div class="inquire-and-calendar">
									<!--查询外层盒子开始-->
									<div class="inquire-box">
										<!--分部标题开始-->
										<div class="part-title-box">
											<div class="part-title color-blue border-blue">
												查询
											</div>
										</div>
										<!--分部标题结束-->
										<ul class="inquiry-condition-box">
											<li>
												<span>状　态</span>
												<div class="state-box clear">
													<div class="state">
														已生成
													</div>
													<div class="state">
														已下发
													</div>
													<div class="state">
														处理中
													</div>
													<div class="state">
														已完成
													</div>
												</div>
											</li>
											<li>
												<span>类　型</span>
												<select name="">
													<option value="">请选择</option>
												</select>
											</li>
											<li>
												<span>级　别</span>
												<select name="">
													<option value="">请选择</option>
												</select>
											</li>
											<li>
												<span>地　区</span>
												<select name="">
													<option value="">请选择</option>
												</select>
											</li>
											<li>
												<span>时间段</span>
												<input class="my-select" type="text" name="" id="" value="" />
											</li>
											<li>
												<span>　　至</span>
												<input class="my-select" type="text" name="" id="" value="" />
											</li>
										</ul>
										<div class="center-button-box">
											<button class="button1 bg-black-blue color-white"><i class="fa fa-search color-white" aria-hidden="true"></i>&nbsp;&nbsp;查&nbsp;询</button>
										</div>
									</div>
									<!--查询外层盒子结束-->
									<!--日历外层盒子开始-->
									<div class="calendar-box">
										<!--分部标题开始-->
										<div class="part-title-box">
											<div class="part-title color-orange border-orange">
												日历
											</div>
										</div>
										<!--分部标题结束-->
										<!--日历内层盒子开始-->
										<div class="calendar-inner-box">
											<div id="ca"></div>
											<input type="text" id="dt" placeholder="trigger calendar">
											<div id="dd"></div>
										</div>
										<!--日历内层盒子结束-->
									</div>
									<!--日历外层盒子结束-->
								</div>
								<!--查询与日历外层盒子结束-->
								<div class="search-result-box">
									<div class="search-result-inner-box">
										<!--分部标题开始-->
										<div class="part-title-box">
											<div class="part-title color-green border-green">
												查询结果
											</div>
										</div>
										<!--分部标题结束-->
										<div class="table-box">
											<table class="table1">
												<tr>
													<th>时间</th>
													<th>地区</th>
													<th>状态</th>
													<th>类别</th>
													<th>级别</th>
													<th>接警员</th>
													<th>所属单位</th>
													<th>操作</th>
												</tr>
												<tr>
													<td>2017-06-02 15:20:18</td>
													<td>石家庄市桥西区</td>
													<td>已生成</td>
													<td>聚众闹事，打架斗殴；</td>
													<td>一般警情</td>
													<td>李警官</td>
													<td>西里派出所</td>
													<td><span class="color-dark-blue">查看详情</span></td>
												</tr>
											</table>
										</div>

									</div>
								</div>
							</div>
							<!--历史记录外层盒子开始-->
						</div>
						<!--主要内容内层盒子结束-->
					</div>
					<!--主要内容外层盒子结束-->
				</div>
				<!--右侧内容内层盒子结束-->
			</div>
			<!--右侧内容外层盒子结束-->
		</div>
	</body>
	<script src="../../yjzh-plugins/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../yjzh-js/index.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../yjzh-js/other.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../yjzh-plugins/calendar/js/calendar.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$('#ca').calendar({
			width: 280,
			height: 280,
			data: [{
					date: '2015/12/24',
					value: 'Christmas Eve'
				},
				{
					date: '2015/12/25',
					value: 'Merry Christmas'
				},
				{
					date: '2016/01/01',
					value: 'Happy New Year'
				}
			],
			onSelected: function(view, date, data) {
				console.log('view:' + view)
				alert('date:' + date)
				console.log('data:' + (data || 'None'));
			}
		});

		$('#dd').calendar({
			trigger: '#dt',
			zIndex: 999,
			format: 'yyyy-mm-dd',
			onSelected: function(view, date, data) {
				console.log('event: onSelected')
			},
			onClose: function(view, date, data) {
				console.log('event: onClose')
				console.log('view:' + view)
				console.log('date:' + date)
				console.log('data:' + (data || 'None'));
			}
		});
	</script>

</html>